<template>
  <div class="contianer">

    <img :src="logo" alt="" class="logo">
    <div class="loginBox">
      <div class="pic">
        <img :src="chahua" alt="">
      </div>
      <!-- loginForm308 360 -->
      <div class="loginFromCon">
        <h2 style="line-height:60px;">登录诊所管理系统</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="phone">
            <el-input type="text" v-model="ruleForm.phone" prefix-icon="el-icon-user-solid" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="ruleForm.pwd" prefix-icon="el-icon-lock" autocomplete="off" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input type="text" v-model="ruleForm.username" prefix-icon="el-icon-s-custom" autocomplete="off" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item class="lgstatus clear">
            <div class="checkbox">
              <input type="checkbox">一个月免登录
            </div>
            <router-link to="/updatepassword">
              <div class="cktitle">忘记密码</div>
            </router-link>

          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('ruleForm')">登 陆</el-button>
          </el-form-item>
          <router-link to="/register">
            <p>申请使用</p>
          </router-link>

        </el-form>

      </div>
    </div>

  </div>

</template>

<script>
import { loginFnApi } from "../../api/loginApi";
import { setToken } from '../../util/cookie'
import logo from '../../assets/images/Lgimages/header-Navigation-top left corner-icon.png'
import chahua from '../../assets/images/Lgimages/main-chahua.png'
var phonereg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
export default {
  data () {
    var validatephone = (rule, value, callback) => {
      if (value == "") {
        callback(new Error('输入的手机号不能为空,请从新输入'))
      } else if (!phonereg.test(value)) {
        callback(new Error('手机号不合法'))
      } else {
        callback()
      }

    }
    var validateusername = (rule, value, callback) => {
      if (value == "") {
        callback(new Error('输入的用户名不能为空,请从新输入'))
      } else if (value.length > 12 || value.length < 6) {
        callback(new Error('用户名长度应在6-12位之间'))
      } else {
        callback()
      }
    }
    var validatepwd = (rule, value, callback) => {
      if (value == "") {
        callback(new Error('输入的密码不能为空,请从新输入'))
      } else if (value.length > 12 || value.length < 6) {
        callback(new Error('密码长度应在6-12位之间'))
      } else {
        callback()
      }
    }
    return {
      logo: logo,
      chahua: chahua,
      checked: true,
      ruleForm: {
        username: "",
        phone: "",
        pwd: "",

      },
      rules: {
        username: [
          { validator: validateusername, trigger: 'blur' }
        ], phone: [
          { validator: validatephone, trigger: 'blur' }
        ], pwd: [
          { validator: validatepwd, trigger: 'blur' }
        ],
      }


    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          loginFnApi(this.ruleForm).then(res => {
            console.log(res);
            if (res.code == 200) {
              setToken('token', res.data)
              this.$router.push('/')

            } else {
              this.$message({
                message: '账号密码不存在',
                type: 'warning'
              });
            }
          })
          //   alert('submit!');
        } else {
          console.log("error submit!!");
          this.$message({
            message: '验证不通过',
            type: 'warning'
          });
          return false;
        }
      });
    },
  }

};
</script>

<style lang="less" scoped>
/deep/#base {
  background-color: #666fe8;
}
.contianer {
  width: 1440px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  .logo {
    margin-top: 40px;
    margin-left: 40px;
    width: 62px;
    height: 62px;
  }
  .loginBox {
    width: 1000px;
    height: 550px;
    box-sizing: border-box;
    padding: 100px 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("../../assets/images/Lgimages/main-neikuang.png") no-repeat;
    background-size: 100% 100%;
    display: flex;

    .pic {
      height: 100%;
      width: 520px;
      margin: 0 38px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .loginFromCon {
      height: 100%;
      width: 300px;
      margin-left: 50px;
      .el-form-item {
        margin-bottom: 20px;
      }
      /deep/.el-form-item__content {
        width: 100%;
        .cktitle {
          float: right;
          color: #5360a9;
        }
        .checkbox {
          float: left;
          color: #5360a9;
        }
      }
      .el-button {
        width: 100%;
        background-color: #5360a9;
        color: #ffffff;
      }
      p {
        text-align: center;
        color: #8f93ed;
      }
      /deep/.el-input__inner {
        background-color: #f1f1fd;
        .el-input__prefix {
          color: #535fa9;
        }
      }
    }
  }
}
</style>